<!DOCTYPE html>
<html>
<head>
	<title>号码详情</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/detail.css">
	<style type="text/css">[v-cloak]{display: none;}</style>
</head>
<body class="number_detail">
<div id="app" v-cloak>
    <div class="title head pad_usual">在线预定靓号入网注意事项</div>
    <div class="pad_usual process_box">
        <img src="img/xhlc.png" class="process_img" alt="">
    </div>
    <div class="detail_tips pad_usual">
        <div class="line"></div>
        <p>1、预约不需要在线支付！</p>
        <p>2、预约成功后，客服首先核实号码，然后确定是否交易。</p>
        <p>3、用户可以随时取消订单,不承担任何费用！</p>
        <p>4、网站号码13608039732为成都移动号码, 成都移动号码可以在全球通,神州行,畅听卡,动感地带套餐中互转;</p>
        <p>5、根据国家工信部相关规定，所有手机号码销售都需要提供身份证实名验证,到店自取。需要您上传身份证照片及在收货时查看身份证原件及收取复印件。</p>
    </div>
    <div class="line_bg"></div>
    <div class="title head pad_usual">预约号码</div>
    <div class="number_on disFlex pad_usual">
        <div class="number_span">
            <span>139</span><span>1010</span><span>2959</span>
        </div>
        <div class="number_item1"><span>成都</span>&emsp;&emsp;<span>移动</span></div>
        <div class="phone_bills">
            ￥100 (含话费40元)
        </div>
    </div>
    <div class="pad_usual  sub_title ">
        选择套餐
    </div>
	<div class="pad_usual">
        <div class="item">
            <div class="pack_list disFlex">
                <span  v-for="(a,i) in packList" :class="{on:a.on==1}" @click="packBtn(i)">{{a.item}}</span>
            </div>
            <div class="list_content">
                398元/月。套餐包含：来电显示，每月前40GB提供4G网速，超过后至100GB上网速度降至3G网络速率（最高7.2Mbps），100GB以上上网速度降至最高256Kbps，次月恢复；每月语音拨打非联通号码超过3000分钟，或拨打超过1000个不同号码的用户，视为非正常拨打行为，当月关闭服务。冰激凌套餐及其主副卡产品如用于纯商业服务、商业用途的流量
            </div>
        </div>
	</div>
    <div class="pad_usual">
        <div class="sub_title">付款方式</div>
        <div class="pay_way">
            <select name="" id="" v-model="pay_way">
                <option value="" class="init">请选择付款方式</option>
                <option value="">线上支付</option>
                <option value="">线下支付</option>
            </select>
            <img src="img/arr_right.png" alt="" class="icon_right">
        </div>
        <div class="sub_title">收货地址</div>
        <div class="address_one" v-show="!moreIf">
            <div class="address_item">
                <label>姓名</label> <input type="text" v-mode="user" placeholder="填写收货人姓名">
            </div>
            <div class="address_item">
                <label>联系电话</label>
                <div class="code_box">
                    <input type="text" v-mode="mobile" placeholder="填写手机号">
                    <div class="code_btn">获取验证码</div>
                </div>
            </div>
            <div class="address_item">
                <label>验证码</label> <input type="text" v-mode="user" placeholder="填写验证码">
            </div>
            <div class="address_item">
                <label>所在地区</label> <input type="text" v-mode="user" placeholder="选择所在地区">
            </div>
            <div class="address_item">
                <label>详细地址</label> <input type="text" v-mode="user" placeholder="填写详细地址">
            </div>
        </div>
        <div class="address_more" v-show="moreIf">
            <div :class="{address2:true,on:a.on==1}" v-for="(a,i) in addressList" @click="addressBtn(i)">
                <div class="info1">
                    <span>罗欣</span> <span>18893820754</span>
                </div>
                <div class="info2">
                    四川省成都市成华区某某路56号某某小区
                </div>
                <img src="img/right_box_icon.png" v-show="a.on==1" class="icon_right_box" alt="">
            </div>
            <div class="address2 add" @click="moreIf=false">
                <img src="img/add.png" class="add_icon" alt="">
                <p>添加新地址</p>
            </div>

        </div>
        <div class="deal_box">
            <span :class="{radio:true,on:isCheck}" @click="isCheck=!isCheck"></span>
            勾选则表示你已经充分了解并完全同意
            <span class="text_blue">《入网协议》</span>
        </div>
        <div class="btn order_btn mt_1rem" @click="orderBtn">
                立即预约
        </div>
    </div>
    <div class="layer_mask pay_success" v-show="pay_type==1">
        <div class="layer_mask_box">
            <img src="img/close_icon.png" class="icon_close" @click="pay_type=0" alt="">
            <div class="title">预约成功</div>
            <div class="content">
                <p>您预约的号码已经提交成功，工作人员将在2个工作日内通过电话联系您，与您核实订单内容。</p>
                <p>您也可以通过拨打以下号码主动与我们取得联系： <span class="red">18147295783</span></p>
            </div>
            <div class="btn_box mt_40h">
                <div class="btn">知道了</div>
            </div>
        </div>
    </div>
    <div class="layer_mask pay_success one" v-show="pay_type==2">
        <div class="layer_mask_box">
            <img src="img/close_icon.png" class="icon_close" @click="pay_type=0" alt="">
            <div class="title">预约失败</div>
            <div class="content">
                手慢一步！您选择的号码已经被别人预约啦，您可以去看看更多的靓号哟~
            </div>
            <div class="btn_box mt_40h">
                <div class="btn">看更多</div>
            </div>
        </div>
    </div>
    
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{
	    packList:[{item:"套餐1",on:1},{item:"套餐2",on:0},{item:"套餐3",on:0},{item:"套餐4",on:0},{item:"套餐5",on:0}],
        pay_way:"",

        user:"",
        mobile:"",
        code:"",
        codeIf:true,
        codeMsg:"",
        codeTime:60,
        codeInter:"",
        province:"",
        city:"",
        country:"",
        address:"",

        moreIf:true,
        isCheck:true,
        addressList:[{on:1},{on:0}],
        pay_type:0, //1 预约成功 2 预约失败

    },
	methods:{
        orderBtn:function () {
          location.href="online_add.html?type=1"
        },
		packBtn:function (i) {
			this.packList.forEach(function (item) {
				item.on=0;
            });
			this.packList[i].on=1;
        },
        addressBtn:function (i) {
          this.addressList.forEach((item)=>{
              item.on=0
          });
          this.addressList[i].on=1;
        },
	},
	created:function(){},
	mounted:function(){}
})	

</script>
</body>
</html>